Skip to content

インラインポップアップ(#, @)の項目をTab/矢印キーで選択可能にする#32

Merged
ktmage merged 2 commits into
developmentfrom
feature/29/tab-select
Mar 1, 2026
Merged

インラインポップアップ(#, @)の項目をTab/矢印キーで選択可能にする#32
ktmage merged 2 commits into
developmentfrom
feature/29/tab-select

Conversation

@ktmage

@ktmage ktmage commented Mar 1, 2026

Copy link
Copy Markdown
Owner

概要

#(ファイル候補)や @(エージェント候補)入力時に表示されるインラインポップアップに、キーボードナビゲーションを追加しました。

Closes #29

変更内容

キーボード操作

キー 動作
Tab / ↓ フォーカスを次の項目に移動(末尾→先頭にラップ)
フォーカスを前の項目に移動(先頭→末尾にラップ)
Enter フォーカス中の項目を選択・確定
Escape ポップアップを閉じる(従来通り)

フォーカス管理

  • ポップアップ表示直後はフォーカスなし(テキスト入力を続行可能)
  • クエリ変更時にフォーカスはリセット
  • フォーカス中の項目はハイライト表示

変更ファイル

UI層

  • ListItemfocused prop と data-focused 属性によるハイライトスタイルを追加
  • HashFilePopup / AgentPopupfocusedIndex prop を追加
  • InputAreahashFocusedIndex / atFocusedIndex 状態管理とキーボードハンドリングを追加

テスト層

  • ListItem / HashFilePopup / AgentPopup の単体テストにフォーカス関連テストを追加
  • シナリオテスト 21-popup-tab-select.test.tsx を新規作成(14テスト)

@ktmage ktmage merged commit e7b1e19 into development Mar 1, 2026
1 check passed
ktmage added a commit that referenced this pull request Mar 1, 2026
THIRD_PARTY_NOTICES.md に react-icons (VS Code Icons subset) のライセンスを追加。
CHANGELOG の Unreleased に Keyboard navigation for inline popups と
SVG アイコン置換を追記。
@ktmage ktmage deleted the feature/29/tab-select branch March 1, 2026 17:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant